<template>
    <div class="list-item">
        <div class="head">
            <div>订单编号：{{data.fictitiousguid}}</div>
            <div>下单时间：{{data.addtime}}</div>
            <div>支付时间：{{data.paystatus === '2' ? data.payovertime : payStateCalc}}</div>
            <div>支付金额：¥{{data.payamount}}</div>
        </div>

        <div class="body">
            <div class="main">
                <div class="row">
                    <div class="col" style="width: 14em;">
                        <span v-html="contentCalc"></span>
                    </div>
                </div>

                <time-cd 
                    v-if="data.paystatus === '1'"
                    :time="data.endtime"
                    class="endtime-cd"
                    @out="outHandler"
                ></time-cd>

            </div>

            <div class="body-right">
                <div class="btns">
                    <el-button 
                    v-if="data.paystatus === '1'"
                    type="primary"
                    @click="rePayHandler"
                    >
                        继续支付
                    </el-button>

                    <el-button 
                    v-if="data.paystatus === '2'"
                    type="primary"
                    @click="reBuyHandler"
                    
                    >
                        再次购买
                    </el-button>

                    <el-button 
                    v-if="data.paystatus === '5'"
                    type="info"
                    disabled
                    >
                        已失效
                    </el-button>

                    <div class="sub-btns">
                        <el-button 
                        v-if="data.paystatus === '2' && data.invoicestatus !== '2'"
                        type="text" 
                        @click="invoiceHandler"
                        >
                            {{data.invoicestatus === '1' ? '编辑发票' : '申请发票'}}
                        </el-button>

                        <el-button 
                        v-if="data.paystatus === '2' && data.invoicestatus === '2'"
                        type="text"
                        @click="dialogDetailVisible = true"
                        >
                            查看发票
                        </el-button>

                        <el-button 
                        v-if="!(data.paystatus === '2' && data.invoicestatus === '1')"
                        type="text" 
                        @click="delHandler"
                        >
                            删除订单
                        </el-button>
                    </div>

                    <div 
                    class="sub-btns"
                    v-if="data.ljsy === '1'"
                    >
                        <el-button 
                        type="text" 
                        @click="immediatelyUseHandler"
                        >
                            立即激活会员权益
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <form-invoice
            v-model="dialogVisible"
            @close="dialogVisible = false"
            @submit="data.invoicestatus = '1'"
            :data="data"
        ></form-invoice>

        <detail-invoice
            v-model="dialogDetailVisible"
            :data="data"
        ></detail-invoice>

        <dialog-pay 
            ref="payer"
            @success="paySuccessHandler"
        ></dialog-pay>

        <dialog-product v-model="dialogProductVisible" :projectids="data.productid" @success="paySuccessHandler"></dialog-product>
    </div>
</template>

<script>
import FormInvoice from './form-invoice';
import DetailInvoice from './detail-invoice';
import TimeCd from '@components/sys/time-cd';

import DialogPay from '../../../../member/components/dialog-pay.vue';

import DialogProduct from '../../components/dialog-product.vue';

export default {
    components: {
        FormInvoice,
        DetailInvoice,
        TimeCd,
        DialogPay,
        DialogProduct
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            dialogVisible: false,

            dialogDetailVisible: false,

            dialogProductVisible:false,

            projectid:''
        };
    },
    computed: {
        payStateCalc() {
            var switchObj = {
                '0': '待支付',
                '1': '支付中',
                '2': '支付成功',
                '3': '支付失败',
                '4': '验证信息错误',
                '5': '订单失效',
            };

            return switchObj[this.data.paystatus] || '';
        },
        contentCalc() {
            var content = this.data.detail.content;

            // if (content && typeof content === 'string') {
            //     return content.replace(/\<\/br\>/g, '，');
            // }

            // return '';

            return content
        },
    },
    watch: {
        dialogVisible(val) {
            if (!val) {
                // 关闭发票表单
                this.$emit('reload');
            }
        }
    },
    methods: {
        invoiceHandler() {
            this.dialogVisible = true;
        },
        delHandler() {
            var fictitiousguid = this.data.fictitiousguid;

            new Chain().link(next => {
                showConfirm('确认删除本条记录吗，删除后不可恢复', '', () => {
                    next();
                });
            }).link(next => {
                this.$post(`${this.$store.state.api.webUrl}/myorders/deleteorder.json`, {
                    fictitiousguid,
                }, (data, res) => {
                    showMsg(res.msg, 'success');
                    this.$emit('del');
                });
            }).run();
        },
        outHandler() {
            this.data.paystatus = '5';
        },
        // 继续支付
        rePayHandler() {
            this.$refs.payer.rePayHandler({
                ordercode: this.data.fictitiousguid,
                payamount: this.data.payamount,
            });
        },
        paySuccessHandler() {
            this.$emit('reload');
        },
        // 重新购买
        reBuyHandler(row) {
            if(this.data.producttype === 'basic'){
                this.dialogProductVisible = true;
            }
            if(this.data.producttype === 'ca_agent'){
                this.goto('/application/ca-agent')
            }
            if(this.data.producttype === 'electronic_bidding'){
                this.goto('/application/electronic-bidding')
            }
            if(this.data.producttype === 'tender_examine'){
                this.goto('/application/file-check')
            }
        },
        // 立即生效
        immediatelyUseHandler() {
            new Chain().link(next => {
                showConfirm('确认立即开通会员权益后，此会员包含的所有服务将立即生效，有效期一年。', '', () => {
                    next();
                });
            }).link(next => {
                this.$post(`${this.$store.state.api.webUrl}/coupon/updateljsy.json`, {
                    ordercode: this.data.fictitiousguid,
                }, (data, res) => {
                    showMsg(res.msg, 'success');
                    this.paySuccessHandler();
                });
            }).run();
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';    

    .list-item{
        border-radius: 6px;
        border: solid 1px #dddddd;

        & + .list-item{
            margin-top: 16px;
        }

        .head {
            line-height: 1em;
            font-size: 14px;
            background-color: #f8f8f8;
            border-bottom: solid 1px #dddddd;
            padding: 20px 24px;
            margin: 0;
            display: flex;
            justify-content: space-between;
        }

        .body {
            padding: 24px;
            display: flex;

            .main{
                flex: 1;
                display: flex;
                justify-content: space-between;

                .endtime-cd {
                    display: flex;
                    text-align: center;
                    align-items: center;
                    color: #ff6600;
                    margin-top: -35px;
                }

                .row {
                    overflow: hidden;

                    & + .row{
                        margin-top: 24px;
                    }

                    &.details{
                        color: #999999;
                    }

                    .col{
                        float: left;

                        span {
                            line-height: 25px;
                        }

                        .title{
                            color: #333333;
                            line-height: 1em;
                        }

                        .value{
                            color: #666;
                            line-height: 1em;
                            margin-top: 1em;

                            .price{
                                font-size: 16px;
                                color: $primaryColor;
                            }
                        }
                    }
                }
            }

            .body-right{
                display: flex;
                align-items: center;

                .btns {
                    width: 132px;
                    margin-left: 40px;
                    margin-top: -5px;
                    margin-bottom: -5px;

                    ::v-deep{
                        .el-button--primary, .el-button--info{
                            width: 100%;
                            padding-top: 10px;
                            padding-bottom: 10px;
                        }

                        .el-button--text{
                            color: $infoColor;
                            padding-top: 8px;
                            padding-bottom: 8px;
                        }
                    }

                    .sub-btns{
                        text-align: center;
                    }
                }
            }

        }
    }
</style>